<template>
  <div class="base-store-detail">
    <info-category class="info-category" :titleClass="titleClass" :contentClass="contentClass" categoryTitle="基础信息" :params="baseParams"
                   :data="data">
      <el-carousel slot="valueSlot5" indicator-position="outside">
        <el-carousel-item v-for="(item,index) in data.fileVos" v-bind:key="item.url" :name="item.url">
          <!--组件使用说明 https://www.npmjs.com/package/vue-photo-preview -->
          <img class="el-have--picture-card" :src="item.url" :preview="0" :preview-text="item.name"/>
        </el-carousel-item>
      </el-carousel>
    </info-category>
    <info-category class="info-category" categoryTitle="交通条件" :titleClass="titleClass" :contentClass="contentClass" :params="trafficParams" :data="data">

    </info-category>
    <info-category class="info-category" categoryTitle="收费标准" :titleClass="titleClass" :contentClass="contentClass" :params="feeParams" :data="data">

    </info-category>
    <info-category class="info-category" categoryTitle="安保条件" :titleClass="titleClass" :contentClass="contentClass" :params="protectParams" :data="data">

    </info-category>
    <info-category class="info-category" categoryTitle="配套条件周边" :titleClass="titleClass" :contentClass="contentClass" :params="assortParams" :data="data">

    </info-category>
    <info-category class="info-category" categoryTitle="仓库类型" :titleClass="titleClass" :contentClass="contentClass" :params="catParams" :data="data">

    </info-category>
    <info-category class="info-category" categoryTitle="功能配置" :titleClass="titleClass" :contentClass="contentClass" :params="functionParams" :data="data">

    </info-category>
    <info-category class="info-category" categoryTitle="消防系统" :titleClass="titleClass" :contentClass="contentClass" :params="fireParams" :data="data">

    </info-category>
    <info-category class="info-category" categoryTitle="服务" :titleClass="titleClass" :contentClass="contentClass" :params="serverParams" :data="data">

    </info-category>
  </div>
</template>
<script type="text/ecmascript-6">
  import InfoCategory from 'components/wms/comm/InfoCategory';
  export default {
    components: {
      InfoCategory
    },
    props: {
      storageId: [String, Number] // 仓库id
    },
    data() {
      return {
        baseParams: [
          {
            label: '仓库名称',
            key: 'storageName',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class'] // 内容样式
          },
          {
            label: '仓库地址',
            key: 'storageAddress',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class']
          },
          {
            label: '联系人姓名',
            key: 'applicantContact',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class']
          },
          {
            label: '联系人电话',
            key: 'applicantConTel',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class']
          },
          {
            label: '参考价格',
            key: 'referencePrice',
            unit: '元/m² • 天',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class']
          },
          {
            label: '仓库图片',
            key: 'fileVos',
            baseClass: ['base-single-pic'], // 子组件的基本样式
            labelClass: ['label-class', 'label-class-file'], // 标签的样式
            valueClass: ['value-slot-class'], // 内容样式
            isShowValue: false,
            needValueSlot: true // value slot
          }
        ],
        assortParams: [
          {
            label: '办公场所',
            key: 'isWorkspaceName',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class'] // 内容样式
          },
          {
            label: '商业区/冻品市场',
            key: 'isFrozenMarketName',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class']
          }
        ],
        catParams: [
          {
            label: '建筑类型',
            key: 'edificeTypeName',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class'] // 内容样式
          },
          {
            label: '仓储功能',
            key: 'storageFunName',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class']
          },
          {
            label: '仓储温控',
            key: 'storageTempName',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class'] // 内容样式
          },
          {
            label: '制冷方式',
            key: 'cryogenModeName',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class'] // 内容样式
          },
          {
            label: '库        容',
            key: 'storageCapacity',
            unit: '万吨',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class']
          },
          {
            label: '建筑面积',
            key: 'conArea',
            unit: '㎡',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class'] // 内容样式
          },
          {
            label: '建筑层数',
            key: 'highLevelName',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class']
          }
        ],
        functionParams: [
          {
            label: '仓库净高',
            key: 'storageHeightName',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class'] // 内容样式
          },
          {
            label: '月台',
            key: 'platformName',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class']
          },
          {
            label: '装卸场地宽度',
            key: 'siteWidthName',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class'] // 内容样式
          },
          {
            label: '装卸车位',
            key: 'parkingSpaceName',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class'] // 内容样式
          },
          {
            label: '装卸门及洞口数量',
            key: 'holdCountName',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class']
          },
          {
            label: '叉车充电桩',
            key: 'isChargePillarName',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class'] // 内容样式
          },
          {
            label: '叉车数量',
            key: 'chargeCount',
            unit: '台',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class']
          }
        ],

        protectParams: [
          {
            label: '园区围墙',
            key: 'parkWallName',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class'] // 内容样式
          },
          {
            label: '出入口门禁',
            key: 'isAccessConName',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class']
          },
          {
            label: '安保条件',
            key: 'securityTermName',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class']
          }
        ],

        feeParams: [
          {
            label: '装卸费',
            key: 'loadingFee',
            unit: '元/吨',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class'] // 内容样式
          },
          {
            label: '扫码费',
            key: 'scanCodeFee',
            unit: '元/件',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class']
          },
          {
            label: '分色费',
            key: 'colorSepFee',
            unit: '元/件',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class']
          },
          {
            label: '管理费',
            key: 'manageFee',
            unit: '元/天',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class']
          }
        ],
        trafficParams: [
          {
            label: '交通环境',
            key: 'trafficSetting',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class'] // 内容样式
          },
          {
            label: '出入口宽度',
            key: 'entranceWidth',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class']
          },
          {
            label: '主通道宽度',
            key: 'mainEntrWidth',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class']
          }
        ],
        fireParams: [
          {
            label: '消防资质备案',
            key: 'isFireFilingName',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class'] // 内容样式
          },
          {
            label: '消防系统',
            key: 'fireSystemName',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class']
          }
        ],
        serverParams: [
          {
            label: '物业管理',
            key: 'propertyManageName',
            baseClass: ['base-single'], // 子组件的基本样式
            labelClass: ['label-class'], // 标签的样式
            valueClass: ['value-class'] // 内容样式
          }
        ],
        data: {},
        fileUrlsArray: [],
        titleClass: ['title-class'],
        contentClass: ['content-class']
      };
    },
    created() {
      this.initData();
    },
    methods: {
      // 获取仓库详情数据
      initData() {
        this.ajax({
          type: 'GET',
          url: '/maliwms/storage/storageDetail/' + this.storageId,
          loading: true,
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            this.data = res.result;
//            if (!this.data.fileVos) {
//              this.data.fileVos = this.fileUrlsArray;
//            }
          }
        });
      }
    }
  };
</script>
<style>
  .base-store-detail {
    width: 100%;
    height: auto;
    border: 1px solid #e5e5e5;
    background-color: white;
    margin-bottom:20px;
    padding-bottom: 20px;
  }

  .base-store-detail .info-category {
    padding-top: 20px;
    /*padding: 20px 20px 0 20px;*/
  }
  .info-category .title-class {
    display: block;
    width: auto;
    text-align: left;
    box-sizing: border-box;
    font-size: 16px !important;
    padding-left: 20px;
    color: #666666;
  }
  .info-category .content-class{
    display:flex;
    flex-wrap: wrap;
    width: 100%;
    padding-top: 24px;
    border-bottom: 1px dashed #e5e5e5;
  }
  .info-category .base-single {
    width: auto;
    vertical-align: middle;
    display: flex;
  }
  .info-category .base-single-pic {
    width: 100%;
    vertical-align: middle;
    display: flex;
  }

  .info-category .label-class {
    width: auto;
    box-sizing: border-box;
    padding-left: 20px;
    font-size: 14px !important;
    color: #1a1a1a;
    vertical-align: middle;
    text-align: left;
    padding-bottom: 24px;
  }
  .info-category .label-class-file {
    min-width: 110px;
  }

  .info-category .value-class {
    width: auto;
    box-sizing: border-box;
    padding-right: 20px;
    color: #1a1a1a;
    vertical-align: middle;
    text-align: left;
    padding-bottom: 24px;
  }

  .info-category .value-slot-class {
    width: auto;
    box-sizing: border-box;
    padding-right: 20px;
    color: #1a1a1a;
    vertical-align: middle;
    text-align: left;
  }

  .info-category .img-content {
    white-space: nowrap;
  }

  .info-category .el-have--picture-card {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200px;
    height: 120px;
    margin-bottom: 24px;
    line-height: 120px;
    margin-left: 20px;
    vertical-align: top;
    white-space: nowrap;

  }
</style>
